<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}">标题</title>
    <script language="JavaScript">

        function init(){
        window.index = 0;
        document.body.onclick = function(){
            let x = event.offsetX;
            let width = document.body.clientWidth;
            if(x < width/2){
                window.index--;
            }else{
                window.index++;
            }
            if(window.index < 0){
                window.index = 0;
            }
            document.getElementById("img" + window.index).scrollIntoView();
        }

        }


    </script>
    <style>
        body {
            text-align: center;
            background-color: black;
        }
        div {
            margin: 0 auto;
            background-color: black;
        }
        div img{
            background-size:contain|cover;
            width:50%;
            height: auto;
            margin-top: 100px;
        }

    </style>
</head>
<body onload="init()">
<br>
<br>
<br>
<div th:each="file,iterator : ${list}">
    <img th:id="img+${iterator.index}" th:src="@{/download(path=${file})}"/><br><br>
</div>
</body>
</html>